<template>
  <div class="product-detail">
   
    <!-- 商品详情主体 -->
    <div class="main-content">
      <div class="container">
        <div class="product-info">
          <!-- 商品图片区域 -->
          <div class="product-images">
            <div class="main-image">
              <img :src="mainImage" alt="小罗足球鞋" />
              <div class="image-tag">01</div>
            </div>
            <div class="thumbnail-list">
              <div
                v-for="(image, index) in thumbnails"
                :key="index"
                class="thumbnail"
                :class="{ active: index === activeImageIndex }"
                @click="selectImage(index)"
              >
                <img :src="image" :alt="`缩略图${index + 1}`" />
              </div>
            </div>
          </div>

          <!-- 商品信息区域 -->
          <div class="product-details">
            <h1 class="product-name">{{product.name}}</h1>

            <div class="product-meta">
              <div class="meta-item">
                <span class="meta-label">商品编码:</span>
                <span class="meta-value">{{product.productCode}}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">商品价格:</span>
                <span class="meta-value price">¥ {{product.price}}</span>
                <span class="meta-value originalPrice">¥ {{product.originalPrice}}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">商品颜色:</span>
                <span class="meta-value">{{product.color}}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">可得积分:</span>
                <span class="meta-value points">{{product.totalIntegral}}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">已售件数:</span>
                <span class="meta-value">{{product.sold}}</span>
              </div>
              <div class="meta-item">
                <span class="meta-label">商品简介:</span>
                <span class="meta-value">{{product.description}}</span>
              </div>
            </div>

            <!-- 尺码选择 -->
            <div class="size-selection">
              <span class="selection-label">选择尺码:</span>
              <div class="size-options">
                <el-button
                  v-for="item in availableSizes"
                  :key="item.sizeName"
                  :type="selectedSize.sizeName === item.sizeName ? 'warning' : 'default'"
                  size="small"
                  @click="selectSize(item)"
                >
                  {{ item.sizeName }}
                </el-button>
              </div>
            </div>
            <!-- 该尺码剩余数量 -->
            <div class="meta-item">
                <span class="meta-label">该尺码剩余数量:</span>
                <span class="meta-value">{{selectedStock}}</span>
              </div>

            <!-- 购买数量 -->
            <div class="quantity-selection">
              <span class="selection-label">购买数量:</span>
              <div class="quantity-controls">
                <el-button
                  size="small"
                  :icon="Minus"
                  @click="decreaseQuantity"
                  :disabled="quantity <= 1"
                />
                <el-input
                  v-model.number="quantity"
                  class="quantity-input"
                  size="small"
                  :min="1"
                  :max="10"
                />
                <el-button
                  size="small"
                  :icon="Plus"
                  @click="increaseQuantity"
                />
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
              <el-button
                type="warning"
                size="large"
                class="add-cart-btn"
                @click="addToCart"
              >
                加入购物车
              </el-button>
              <el-button
                type="primary"
                size="large"
                class="buy-now-btn"
                @click="buyNow"
              >
                立即购买
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品详情说明 -->
    <div class="product-description">
      <div class="container">
        <div class="description-content">
          <h3>价格说明</h3>
          <div class="description-text">
            <p><strong>制造商:</strong> 童装展足球鞋制品制造有限公司，老师地方有你主持中国，足球鞋正品，童装每一件都是正品进口流程配送，更多玩主产品可到世界商。(四季服装）童装专卖门前，乐童新主动权在手公司拥有真宽正牌（定价商标与商标局）免费快递（童装邦安全）</p>

            <p><strong>货物说明:</strong> 童装展展足球鞋制品制造有限公司供应足球鞋产品为正牌进口产品，经商标局核验定理，全程货到品质包安装，开发测试，简单设计生活工艺，童装及基本品牌，真品鞋底合拟品牌。展卖员加工程式，用最好材料及配件制造生产各个标准的童装正品。童装生产式为根据国际及发声测试的标准制造，满足童质量标准，产品保持多经过国家多项权质检验，全采用拼模技术，全面保质量安全，产品远销欧美各国。</p>

            <p><strong>网站:</strong> 足球鞋宝贝的（专业）公司足球鞋中国安装站进口专业官网支个工中，设计，公司，多开口，来自"高放，透明，分享，真任"的商业文明，从而产生出一个"开放，透明，分享，责任"的商业文明。</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部服务保障 -->
    <div class="service-section">
      <div class="container">
        <div class="service-items">
          <div class="service-item">
            <el-icon class="service-icon"><CircleCheck /></el-icon>
            <span>正品保障</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><Clock /></el-icon>
            <span>7天无理由退货</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><Van /></el-icon>
            <span>15天免费换货</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><Coin /></el-icon>
            <span>满69元包邮</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><Lightning /></el-icon>
            <span>闪电发货</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  Search,
  Plus,
  Minus,
  CircleCheck,
  Clock,
  Van,
  Coin,
  Lightning
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { getProductDetail } from '@/api/product'
import { getAvailableSizes } from '@/api/size'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { addToCartMessage } from '@/api/cart'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

// 商品详情
const product = ref({
  id: '',
  productCode: '',
  name: '',
  price: 0,
  stock: 0,
  sold: 0,
  description: '',
  totalIntegral: 0,
  originalPrice: 0,
  color: '',
  description: ''
})

// 初始化商品详情
onMounted(() => {
  product.value.id = route.query.productId
  if (product.value.id) {
     getProductDetail(product.value.id).then(res => {
      product.value=res.data
     })
     //获取可选尺码以及剩余数量
     getAvailableSizes(product.value.id).then(res => {
      console.log('可选尺码', res.data)
      availableSizes.value = res.data
     })
  }
})


// 选中的图片索引
const activeImageIndex = ref(0)
// 选中的尺码
const selectedSize = ref({
  sizeId: 0,
  sizeName: '',
})
//选中尺码的剩余数量
const selectedStock = ref(0)
// 购买数量
const quantity = ref(1)

// 商品图片
const thumbnails = ref([
  'placeholder/80/80',
  'placeholder/80/80',
  'placeholder/80/80',
  'placeholder/80/80',
  'placeholder/80/80',
  'placeholder/80/80',
  'placeholder/80/80'
])

const mainImage = computed(() => {
  return '/api/placeholder/400/400'
})

// 可选尺码
const availableSizes = ref([{
  size: '40',
  stock: 0
}])

// 方法
const selectImage = (index) => {
  activeImageIndex.value = index
}

// 选择尺码
const selectSize = (size) => {
  selectedSize.value.sizeName = size.sizeName
  selectedSize.value.sizeId = size.sizeId
  //根据选中的尺码获取剩余数量
  selectedStock.value = availableSizes.value.find(item => item.sizeId === size.sizeId)?.remainingStock || 0
}

// 增加购买数量
const increaseQuantity = () => {
  if (quantity.value < 10) {
    quantity.value++
  }
}

// 减少购买数量
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

// 购物车信息
const cartInfo = ref({
  productId: 0,
  sizeId: 0,
  quantity: 0,
  uid: 0
})
// 加入购物车
const addToCart = () => {
  if (!selectedSize.value) {
    ElMessage.warning('请选择尺码')
    return
  }
  console.log('加入购物车')
  cartInfo.value.productId = product.value.id
  cartInfo.value.sizeId = selectedSize.value.sizeId
  cartInfo.value.quantity = quantity.value
  cartInfo.value.uid = userStore.user.uid
  console.log('加入购物车', cartInfo.value)
  addToCartMessage(cartInfo.value).then(res => {
    if (res.status === 200) {
      ElMessage.success('加入购物车成功')
    }
  })
}


// 立即购买
const buyNow = () => {
  if (!selectedSize.value.sizeId) {
    ElMessage.warning('请选择尺码')
    return
}
// 提交订单
const submitData=ref({
  id: product.value.id,
  sizeID: selectedSize.value.sizeId,
  sizeName: selectedSize.value.sizeName,
  quantity: quantity.value,
  name: product.value.name,
  price: product.value.price,
  image: mainImage.value,
  integral: product.value.totalIntegral,
  isNotCart: true
})
   router.push({
     //path: '/order/submit',
     name:'orderSubmit',
     query: submitData.value
   })
}
</script>

<style scoped>
.product-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header-content {
  display: flex;
  align-items: center;
  padding: 15px 0;
  gap: 30px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.brand-name {
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.nav-menu {
  flex: 1;
}

.main-menu {
  border: none;
}

.search-input {
  width: 300px;
}

/* Breadcrumb */
.breadcrumb-section {
  background: white;
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
}

/* Main Content */
.main-content {
  padding: 30px 0;
}

.product-info {
  display: flex;
  gap: 40px;
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Product Images */
.product-images {
  flex: 1;
  max-width: 500px;
}

.main-image {
  position: relative;
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f0f0f0;
}

.image-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.thumbnail {
  width: 80px;
  height: 80px;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.thumbnail.active {
  border-color: #ff8c00;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f0f0f0;
}

/* Product Details */
.product-details {
  flex: 1;
  min-width: 400px;
}

.product-name {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 30px 0;
}

.product-meta {
  margin-bottom: 30px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 16px;
}

.meta-label {
  width: 120px;
  color: #666;
}

.meta-value {
  color: #333;
  font-weight: 500;
  margin-left: 10px;
}

.meta-value.price {
  font-size: 24px;
  font-weight: bold;
  color: #e74c3c;
}

.meta-value.originalPrice {
  color: #999;
  text-decoration: line-through;
}

.meta-value.points {
  color: #ff8c00;
}

.size-selection,
.quantity-selection {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.selection-label {
  width: 100px;
  color: #333;
  font-weight: 500;
}

.size-options {
  display: flex;
  gap: 10px;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-input {
  width: 80px;
}

.action-buttons {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}

.add-cart-btn,
.buy-now-btn {
  flex: 1;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
}

/* Product Description */
.product-description {
  background: white;
  margin-top: 30px;
  padding: 40px 0;
}

.description-content h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 20px;
}

.description-text p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* Service Section */
.service-section {
  background: #f8f9fa;
  padding: 30px 0;
  margin-top: 30px;
}

.service-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #666;
}

.service-icon {
  font-size: 24px;
  color: #ff8c00;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 15px;
  }

  .nav-menu {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  .product-info {
    flex-direction: column;
    padding: 20px;
  }

  .product-images {
    max-width: 100%;
  }

  .product-details {
    min-width: auto;
  }

  .action-buttons {
    flex-direction: column;
  }

  .service-items {
    flex-direction: column;
    gap: 20px;
  }
}
</style>